/**
 * Created by user on 2018/5/22.
 */
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { formatSocketMsg } from '../utils/Global'

class WaitTeacherMask extends Component {
  render() {
    const { showDm } = this.props
    return(
      <div className={`wait_teacher ${showDm ? 'showDm' : 'hideDm'}`}>
        <div className="wait_word">等待讲师进入Q&A</div>
        <div className="bg" style={{backgroundImage: 'url(' + this.getLastImage() + ')'}}></div>
        <div className="bookshelf_wrapper">
          <div className="books_list">
            <div className="book_item first">
              <div className="inner_top"></div>
              <div className="inner_bottom"></div>
            </div>
            <div className="book_item second">
              <div className="inner_top"></div>
              <div className="inner_bottom"></div>
            </div>
            <div className="book_item third">
              <div className="inner_top"></div>
              <div className="inner_bottom"></div>
            </div>
            <div className="book_item fourth">
              <div className="inner_top"></div>
              <div className="inner_bottom"></div>
            </div>
            <div className="book_item fifth">
              <div className="inner_top"></div>
              <div className="inner_bottom"></div>
            </div>
          </div>
          <div className="shelf">
            <div className="li"></div>
            <div className="li next"></div>
          </div>
        </div>
      </div>
    )
  }
  getLastImage() {
    const { materials, cover } = this.props
    if (!materials || materials.length <= 0) {
      return cover
    }
    const lastM = materials[materials.length - 1]
    const { messages, images } = lastM
    if (!messages || messages.length <= 0) {
      return cover
    }
    var lastMsg = formatSocketMsg(messages[messages.length - 1])
    var index = lastMsg.data.index
    return images[index].img || cover
  }
}

const mapState = (state) => {
  return {
    materials: state.MainScreenState.materials,
    cover: state.MainScreenState.info.cover,
    showDm: state.DmState.show
  }
}

export default connect(mapState)(WaitTeacherMask)
